<template>
  <view
    class="searchContent searchContent-width flexRowBetween"
    :style="{ '--searchWidth': width + 'vw' }"
    @click="click"
  >
    <view class="searchInput"
      ><u-search
        class="searchValue"
        placeholder-color="#999999"
        bg-color="#F2F2F2"
        height="80"
        :placeholder="placeholder"
        :shape="shape"
        :clearabled="clear"
        :animation="true"
        :show-action="false"
        :disabled="disabled"
        v-model="keyword"
        @search="search"
      ></u-search>
      <BaseIcon
        v-if="showScan"
        name="scan"
        class="scan"
        color="#999"
        @onClick="onClickScan"
      />
    </view>
    <view class="img flexRowAllCenter" v-if="typeImg">
      <image
        v-for="item in imgIcon[typeImg]"
        class="iconStyle"
        :src="item.url"
        :key="item.id"
        :style="item.style"
        @click.stop="onClickIconImg(item.id)"
      />
    </view>
  </view>
</template>

<script>
import { getUrlParams, getUrlDynamicData} from "../../common/tools/utils";
import BaseIcon from "./BaseIcon.vue";
export default {
  components: { BaseIcon },
  name: "BaseSearch",
  props: {
    placeholder: { type: String | Object, default: "请输入搜索内容" }, //提示文字
    shape: { type: String, default: "square" }, //是否圆角
    clear: { type: Boolean, default: false }, //显示清除控件
    typeImg: { type: String | Object, default: "" }, //右侧icon类型
    showScan: { type: Boolean, default: false }, //是否显示扫码icon
    width: { type: Number | String, default: "100" },
    disabled: { type: Boolean, default: false },
  },
  data() {
    return {
      imgIcon: {
        service: [
          {
            url: require("@/static/img/icon/service-icon.png"),
            id: 0,
            style: "width:44rpx;height:44rpx",
          },
          {
            url: require("@/static/img/icon/notice-icon.png"),
            id: 1,
            style: "width: 40rpx;height:44rpx",
          },
        ],
        place: [
          {
            url: require("@/static/img/icon/location-icon.png"),
            id: 0,
            style: "width:36rpx;height:44rpx",
          },
          {
            url: require("@/static/img/icon/screen-icon.png"),
            id: 1,
            style: "width:38rpx;height:38rpx",
          },
        ],
        screen: [
          {
            url: require("@/static/img/icon/screen-icon.png"),
            id: 0,
            style: "width:38rpx;height:38rpx",
          },
        ],
      },
      keyword:"", // 查询数据
    };
  },
  options: { styleIsolation: "isolated" }, //组件必须加,才能修改内部样式
  methods: {
    onClickScan() {
      uni.scanCode({
        onlyFromCamera: false,
        scanType: ["qrCode", "barCode"],
        success: ({ result, scanType, charSet, path }) => {
          if (!result) return this.isShowErr("请扫描正确二维码~");
          result = decodeURIComponent(result);
          let option = {},
            vscode,
            device_sn,
            mid;
          if (result.includes("vscode")) {
            vscode = getUrlParams(result, "vscode");
            this.keyword = vscode;
          } else if (result.includes("mid")) {
            mid = getUrlDynamicData(result, "mid");
          } else {
            if (result.includes("device_sn")) {
              device_sn = getUrlDynamicData(result, "device_sn");
            }else {
              device_sn = result;
            }
            this.keyword = device_sn;         
          }
          option = {
            vscode,
            device_sn,
            mid,
          };
          console.log("🚀 ~ option", option);
          this.$emit("onClickScan", result, option);
        },
        fail: (error) => {
          if (error?.errMsg.includes("cancel")) return;
          this.isShowErr("请扫描正确二维码~");
        },
      });
    },
    onClickIconImg(e) {
      this.$emit("onClickIcon", e);
    },
    search(val) {
      this.$emit("search", val);
    },
    click() {
      this.$emit("click");
    },
  },
};
</script>

<style lang="scss" scoped >
.searchContent-width {
  width: var(--search-width);
}

 
.searchContent {
  position: relative;
  z-index: 999;
  padding: 20rpx 30rpx;
  background-color: $uni-bg-color;
  box-sizing: border-box;
  .searchInput {
    flex: 1;
    position: relative;
    .scan {
      position: absolute;
      font-size: 50rpx;
      color: $textGray;
      right: 20rpx;
      top: 50%;
      transform: translateY(-50%);
      z-index: 900;
    }
  }
  .iconStyle {
    width: 44rpx;
    height: 44rpx;
    margin-left: 40rpx;
  }
}
</style>